<template>
  <div class="custom-export-container">
    <Dropdown v-model:open="dropdownVisible" :trigger="['click']">
      <Button type="primary" size="large" @click="toggleDropdown">
        导出已发货订单
        <UpOutlined style="font-size: 16px;" v-if="!dropdownVisible" />
        <DownOutlined style="font-size: 16px;" v-else />
      </Button>
      <template #overlay>
        <div class="dropdown-panel">
          <div class="documents-list">
            <div class="documents-content">
              <div
                v-for="item in visibleDocuments"
                :key="item.id"
                class="document-item"
                @click="selectDoc(item)"
              >
                {{ item.name }}
              </div>
              <div
                class="document-item custom-toggle"
                @click="toggleCustomPanel"
              >
                <span>自定义导出单据</span>
                <RightOutlined style="font-size: 16px;" />
              </div>
            </div>
          </div>

          <div class="custom-panel" v-if="showCustomPanel">
            <div class="panel-header">点击显示/隐藏导出单据类型</div>
            <div class="custom-content">
              <draggable
                v-model="documents"
                handle=".drag-handle"
                item-key="id"
                @end="onDragEnd"
              >
                <template #item="{ element }">
                  <div class="sortable-item">
                    <div
                      class="sortable-item-btn"
                      :class="element.visible ? 'active' : ''"
                      @click="updateVisibleDocuments(element)"
                    >
                      {{ element.name }}
                    </div>
                    <HolderOutlined class="drag-handle" />
                  </div>
                </template>
              </draggable>
            </div>
          </div>
        </div>
      </template>
    </Dropdown>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watchEffect } from "vue";
import draggable from "vuedraggable";
import {
  DownOutlined,
  UpOutlined,
  RightOutlined,
  HolderOutlined,
} from "@ant-design/icons-vue";
import { message, Dropdown, Button } from "ant-design-vue";

// 单据数据
const documents = ref([
  { id: 1, name: "线下出库单(物联网卡)", visible: true },
  { id: 2, name: "线下出库单(号卡)", visible: true },
  { id: 3, name: "销售出库单(物联网卡)", visible: true },
  { id: 4, name: "销售出库单(号卡)", visible: true },
  { id: 5, name: "销售出库单(设备)", visible: true },
  { id: 6, name: "线下出库单(设备)", visible: false },
  { id: 7, name: "线下出库单(化妆品)", visible: false },
]);

// UI状态
const dropdownVisible = ref(false);
const showCustomPanel = ref(false);

// 计算属性
const visibleDocuments = computed(() => {
  return documents.value.filter((doc) => doc.visible);
});

// 方法
const toggleDropdown = () => {
  dropdownVisible.value = !dropdownVisible.value;
};

// 使用 watchEffect 自动追踪依赖
watchEffect(() => {
  if (dropdownVisible.value) {
    const handleClickOutside = (e) => {
      // 检查点击的元素是否在 dropdown 内
      const dropdownElement = document.querySelector('.ant-dropdown');
      if (dropdownElement && !dropdownElement.contains(e.target) && 
          !e.target.closest('.ant-btn')) { // 排除按钮本身
        dropdownVisible.value = false;
      }
    };
    // 下一帧再添加监听器，避免立即触发
    setTimeout(() => {
      document.addEventListener('click', handleClickOutside);
    }, 0);
    // 存储清理函数
    window.handleOutsideClick = handleClickOutside;
  } else {
    showCustomPanel.value = false;
    // 移除事件监听器
    if (window.handleOutsideClick) {
      document.removeEventListener('click', window.handleOutsideClick);
      delete window.handleOutsideClick;
    }
  }
});

const toggleCustomPanel = () => {
  showCustomPanel.value = !showCustomPanel.value;
};

const selectDoc = (item) => {
  message.success(item.name);
};

const updateVisibleDocuments = (element) => {
  documents.value.forEach((item) => {
    if (element.id == item.id) {
      item.visible = !element.visible;
    }
  });
};

const onDragEnd = () => {
  message.success("单据顺序已更新");
};
</script>

<style lang="less" scoped>
.custom-export-container {
  max-width: 1000px;
  padding: 20px;
}
.dropdown-panel {
  margin-left: -10px;
  display: flex;
  justify-content: center;
  align-items: start;
  overflow: hidden;
  .documents-list,
  .custom-panel {
    /* flex: 1; */
    min-width: 300px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin: 10px;
    box-shadow: 0 3px 8px 0px #606060;
    .documents-content,
    .custom-content {
      overflow-y: auto;
      .document-item {
        color: #000;
        font-size: 16px;
        font-weight: 400;
        padding: 12px 16px;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:first-child {
          border-radius: 10px 10px 0 0;
        }
        &:last-child {
          border-radius: 0 0 10px 10px;
        }
        &:hover {
          background: #e6f7ff;
        }
        .custom-toggle {
          font-weight: 400;
          border-radius: 6px;
          background: #ffffff;
        }
      }
      .sortable-item {
        background: #ffffff;
        padding: 5px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        &:last-child {
          padding-bottom: 20px;
          border-radius: 0 0 10px 10px;
        }
        &:hover {
          background: #ffffff;
        }
        .sortable-item-btn {
          width: 100%;
          color: #000;
          font-size: 16px;
          font-weight: 400;
          text-align: center;
          border: 1px solid #c6c6c6;
          padding: 5px 10px;
          border-radius: 6px;
          margin-right: 15px;
        }
        .active {
          color: #0077fa;
          border: 1px solid #0077fa;
        }
        .drag-handle {
          color: #8c8c8c;
          font-size: 16px;
          cursor: move;
        }
      }
    }
    .panel-header {
      color: #666666;
      font-size: 16px;
      font-weight: 400;
      padding: 12px 16px;
      border-radius: 10px 10px 0 0;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
